/**
 * Creates a visual theme for a Panel.
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {color/list} $border-color
 * Panel border-color
 *
 * @param {number/list} $border-width
 * Panel border-width
 *
 * @param {string/list} $border-style
 * Panel border-style
 *
 * @param {color} $body-background-color
 * Panel body background-color
 *
 * @param {color} $body-color
 * Panel body text color
 *
 * @param {color} $body-border-color
 * Panel body border-color
 *
 * @param {number/list} $body-border-width
 * Panel body border-width
 *
 * @param {number/list} $body-border-style
 * Panel body border-style
 *
 * @param {string/number} $body-font-weight
 * Panel body font-weight
 *
 * @param {number} $body-font-size
 * Panel body font-size
 *
 * @param {number} $body-font-size-big
 * Panel body font-size in the {@link Ext.Component#$enable-big big} sizing scheme
 *
 * @param {number} $body-line-height
 * Panel body line-height
 *
 * @param {number} $body-line-height-big
 * Panel body line-height in the {@link Ext.Component#$enable-big big} sizing scheme
 *
 * @param {string} $body-font-family
 * Panel body font-family
 *
 * @param {string} $manage-borders
 * `true` to include {@link #manageBorders border management} rules
 *
 * @member Ext.Panel
 */
@mixin panel-ui(
    $ui: null,
    $border-color: null,
    $border-width: null,
    $border-style: null,
    $body-background-color: null,
    $body-color: null,
    $body-border-color: null,
    $body-border-width: null,
    $body-border-style: null,
    $body-font-weight: null,
    $body-font-size: null,
    $body-font-size-big: null,
    $body-line-height: null,
    $body-line-height-big: null,
    $body-font-family: null,
    $manage-borders: $panel-manage-borders
) {
    $ui-suffix: ui-suffix($ui);

    .x-panel#{$ui-suffix} {
        @if not $manage-borders {
            @include border($border-width, $border-style, $border-color)
        }
    }

    .x-panel-inner#{$ui-suffix} {
        background-color: $body-background-color;
        color: $body-color;
        @include border($body-border-width, $body-border-style, $body-border-color);
        @include font($body-font-weight, $body-font-size, $body-line-height, $body-font-family);

        @if $enable-big {
            .x-big & {
                @if $body-font-size-big != $body-font-size {
                    font-size: $body-font-size-big;
                }
                @if $body-line-height-big != $body-line-height {
                    line-height: $body-line-height-big;
                }
            }
        }
    }

    @if $manage-borders {
        @include border-management(
            $parent-cls: panel#{$ui-suffix},
            $border-width: 1px,
            $border-color: $base-color
        );
    }
}

@include panel-ui(
    $border-color: $panel-border-color,
    $border-width: $panel-border-width,
    $border-style: $panel-border-style,
    $body-background-color: $panel-body-background-color,
    $body-color: $panel-body-color,
    $body-border-color: $panel-body-border-color,
    $body-border-width: $panel-body-border-width,
    $body-border-style: $panel-body-border-style,
    $body-font-weight: $panel-body-font-weight,
    $body-font-size: $panel-body-font-size,
    $body-font-size-big: $panel-body-font-size-big,
    $body-line-height: $panel-body-line-height,
    $body-line-height-big: $panel-body-line-height-big,
    $body-font-family: $panel-body-font-family
);



// TODO: UI for floating/anchor styles
// Private variables
//$anchor-height: .7em;
//$anchor-width: $anchor-height*2.33;
//.x-webkit .x-anchor {
//    position: absolute;
//    overflow: hidden;
//
//    &.x-anchor-top {
//        margin-top: -$anchor-height + 0.02em;
//        margin-left: -$anchor-width / 2;
//        width: $anchor-width;
//        height: $anchor-height;
//        -webkit-mask: 0 0 get-image-url('tip_top') no-repeat;
//        -webkit-mask-size: $anchor-width $anchor-height;
//        background-color: darken($base-color, 40%);
//    }
//
//    &.x-anchor-bottom {
//        margin-left: -$anchor-width / 2;
//        width: $anchor-width;
//        height: $anchor-height;
//        -webkit-mask: 0 0 get-image-url('tip_bottom') no-repeat;
//        -webkit-mask-size: $anchor-width $anchor-height;
//        background-color: darken($base-color, 40%);
//    }
//
//    &.x-anchor-left {
//        margin-left: -$anchor-width / 2 + 0.15em;
//        margin-top: -$anchor-height / 2;
//        height: $anchor-width;
//        width: $anchor-height;
//        -webkit-mask: 0 0 get-image-url('tip_left') no-repeat;
//        -webkit-mask-size: $anchor-height $anchor-width;
//        background-color: darken($base-color, 40%);
//    }
//
//    &.x-anchor-right {
//        margin-top: -$anchor-height / 2;
//        height: $anchor-width;
//        width: $anchor-height;
//        -webkit-mask: 0 0 get-image-url('tip_right') no-repeat;
//        -webkit-mask-size: $anchor-height $anchor-width;
//        background-color: darken($base-color, 40%);
//    }
//}
